<template>
  <el-form :model="detailForm"  v-loading="loading" class="elForm">
    <el-card shadow="never" class="box-card">
      <div slot="header" class="header-card">
        <span class="header-card-title">基础信息</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="合同禀议号:">
            <span>{{ detailForm.contractReportNumber }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="采购禀议号:">
            <span>{{ detailForm.procurementReportNumber }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户名称:">
            <span>{{ detailForm.customerName }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
<!--        <el-col :span="8">-->
<!--          <el-form-item label="客户类型:">-->
<!--            <span>{{ selectDictLabel(dict.type.customer_type, detailForm.customerType) }}</span>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :span="8">
          <el-form-item label="车辆归属:">
            <span>{{ detailForm.ascription }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆产权:">
            <span>{{ detailForm.propertyRightName }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <div>
            <span>精品装饰说明：</span>
<!--            <span>合计费用：￥<span>{{}}</span></span>-->
          </div>

          <el-table size="mini" :data="detailForm.proList" border style="width: 100%">
            <el-table-column prop="decorateName" align="center" label="项目">
            </el-table-column>
            <el-table-column prop="budgetPrice" align="center" label="单车预算金额">
              <template #default="{row}">
                <span>{{format_thousand(row.budgetPrice)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="remark" align="center" label="说明"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>

    <el-card shadow="never" class="box-card">
      <div slot="header" class="header-card">
        <span class="header-card-title">装饰信息</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="装饰预计开始日期:">
            <span>{{ detailForm.expectEndTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="预计装饰结束日期:">
            <span>{{ detailForm.expectStartTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="供应商:">
            <span>{{ detailForm.supplierName }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="装饰费用:">
            <span>{{ format_thousand(detailForm.price) }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col style="margin-bottom: 16px">
          <div class="decoration-illustrate">
            <span>精品装饰说明：</span>
          </div>
          <el-table size="mini" :data="detailForm.proList" border style="width: 100%">
            <el-table-column align="center"  label="项目" prop="decorateName">
            </el-table-column>
            <el-table-column align="center" label="预算金额" prop="budgetPrice">
              <template #default="{row}">
                <span>{{format_thousand(row.budgetPrice)}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center"  label="实际金额" prop="actualPrice">
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col>
          <el-form-item label="备注:">
            <span style="margin: 0">{{ detailForm.remark }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>

    <el-card shadow="never" class="box-card">
      <div slot="header" class="header-card">
        <span class="header-card-title">凭证信息</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="实际装饰开始时间:">
            <span>{{ detailForm.actualStartTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="实际装饰结束时间:">
            <span>{{ detailForm.actualEndTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="付款类型:">
            <span v-if="detailForm.payType == 1">报销</span>
            <span v-if="detailForm.payType == 2">公司垫付</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col>
          <el-form-item label="装饰完成照片:">
            <image-common v-model="detailForm.photoUrl" :disabled="true"  :upType="2"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col>
          <el-form-item label="装饰凭证上传:">
            <image-common v-model="detailForm.voucherUrl" :disabled="true"  :upType="2"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col>
          <el-form-item label="装饰意见反馈:">
            <span>{{detailForm.view}}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>
  </el-form>
</template>

<script>
import { getZsCarId } from "@/api/zcwh/vehicleFilesaApi.js";
import { getToken } from "@/utils/auth";

export default {
  name: "bxxx",
  dicts:['customer_type'],
  components: {},
  props: ["carId", "dataObj"],
  data() {
    return {
      tableDatas: [],
      tableData: [],
      isForm: false,
      routeQuery: {},

      detailForm: {},
      loading: false,
      historyList: [],
    };
  },
  watch: {},
  computed: {},
  created() {
    this.getZsCarId();
  },
  methods: {
    getZsCarId() {
      this.loading = true;
      getZsCarId(this.carId)
        .then((res) => {
          if (res.code === 200) {
            this.detailForm = res.data || {};
            this.loading = false;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>


<style lang="scss" scoped>
@import "@/styles/cwgd/formScss.scss";
</style>
